<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div></div>

<script src="./ujiuye.js"></script>
<script>

    //向left运动500后，在向top运动500

    var odiv = document.querySelector('div')
	//添加事件及函数调用
    odiv.onclick = function () {
        console.log(this)
        solomoveopacity(this, 500, 'left', function () {
            solomoveopacity(odiv, 500, 'top')
        })
    }

    //回调函数就是将函数作为参数传入 特点：可以传可以不传 callback:回调函数
    function solomoveopacity(ele, target, attr, callback) {
        //频繁触发的地方 清楚定时器
        clearInterval(ele.timer)

        ele.timer = setInterval(function () {
            //判断是否是opacity
            if (attr == 'opacity') {
                // 目标值  都扩大100倍
                var end = target * 100
            }
            
            //获取div当前的位置 判断是否是opacity
            if (attr == 'opacity') {
                //当前值和目标值  都扩大100倍
                var current = parseInt(getStyle(ele, attr) * 100)
                
                //避免speed有小数问题取整
                var speed = (end - current) / 10
                speed = speed > 0 ? Math.ceil((end - current) / 10) : Math.floor((end - 				current) / 10)    
            } 
            else { 
                var current = parseInt(getStyle(ele, attr))
                //避免speed有小数问题取整
                var speed = (target - current) / 10
                speed = speed > 0 ? Math.ceil((target - current) / 10) : 								Math.floor((target - current) / 10)
            }
            /* 
            speed  >0  向上取整   Math.ceil((target - current)/10)
            speed  <0  向下取整   Math.floor((target - current)/10)
            */
            
            //到达位置清楚定时器
            if (current == target) {
                clearInterval(ele.timer)
                 //callback()
                //判断是否有回调 如果直接写callback() 当用户不传回调函数的时候
                //控制台会报callback is not a function
                callback && callback()
            }
            
            if (attr == 'opacity') {
                ele.style[attr] = (current + speed) / 100
            } else {
                ele.style[attr] = current + speed + "px"
            }
        }, 30)
    }
</script>
</body>
</html>